<template>
  <div class="interface">
    <el-row>
      <el-col :span="5">
        <interfaceGroup></interfaceGroup>
      </el-col>
      <el-col :span="19">
        <div class="interface-content">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="预览" name="first">
              <h3 class="interface-title">接口信息</h3>
              <el-form label-width="120px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="接口编号：">
                      <span>{{ interfaceForm.id }}</span>
                    </el-form-item>
                    <el-form-item label="接口状态：">
                      <el-tag v-if="interfaceForm.status === 0" type="warning" size="small">未完成</el-tag>
                      <el-tag v-if="interfaceForm.status === 1" type="success" size="small">已完成</el-tag>
                      <el-tag v-if="interfaceForm.status === 2" size="small">已废弃</el-tag>
                    </el-form-item>
                    <el-form-item label="添加人员：">
                      <span>{{ interfaceForm.author }}</span>
                    </el-form-item>
                    <el-form-item label="接口描述：">
                      <span>{{ interfaceForm.description }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label="接口名称：">
                      <span>{{ interfaceForm.name }}</span>
                    </el-form-item>
                    <el-form-item label="更新时间：">
                      <span><i class="el-icon-time"></i>  {{ interfaceForm.updateTime }}</span>
                    </el-form-item>
                    <el-form-item label="接口路径：">
                      <el-tag v-if="interfaceForm.method === 'GET'" size="small">GET</el-tag>
                      <el-tag v-if="interfaceForm.method === 'POST'" type="success" size="small">POST</el-tag>
                      <el-tag v-if="interfaceForm.method === 'PUT'" type="danger" size="small">PUT</el-tag>
                      <el-tag v-if="interfaceForm.method === 'PUT'" type="warning" size="small">DELETE</el-tag>
                      <span style="letter-spacing: 1px;color: #65c294">{{ interfaceForm.path }}</span>
                      <i class="el-icon-document-copy" @click="copy(interfaceForm.path)"></i>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <h3 class="interface-title">Request</h3>
              <div class="interface-info-request" style="padding-top: 15px">
                <i class="el-icon-success" style="padding-left: 8px"></i>
                <span style="font-size: 14px;">请求Params</span>
                <el-table border stripe style="width: 100%"
                          :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                  <el-table-column prop="name" label="参数名称" width="200">
                  </el-table-column>
                  <el-table-column prop="isNeed" label="是否必须" width="150">
                  </el-table-column>
                  <el-table-column prop="type" label="参数类型" width="200">
                  </el-table-column>
                  <el-table-column prop="example" label="示例" width="280">
                  </el-table-column>
                  <el-table-column prop="description" label="描述">
                  </el-table-column>
                </el-table>
              </div>
              <div class="interface-info-headers" style="padding-top: 15px">
                <i class="el-icon-success" style="padding-left: 8px"></i>
                <span style="font-size: 14px">请求Headers</span>
                <el-table border stripe style="width: 100%"
                          :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                  <el-table-column prop="name" label="参数名称" width="200">
                  </el-table-column>
                  <el-table-column prop="isNeed" label="是否必须" width="150">
                  </el-table-column>
                  <el-table-column prop="type" label="参数类型" width="200">
                  </el-table-column>
                  <el-table-column prop="example" label="示例" width="280">
                  </el-table-column>
                  <el-table-column prop="description" label="描述">
                  </el-table-column>
                </el-table>
              </div>
              <div class="interface-info-body" style="padding-top: 15px">
                <i class="el-icon-success" style="padding-left: 8px"></i>
                <span style="font-size: 14px">请求Body</span>
                <el-table border stripe style="width: 100%"
                          :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                  <el-table-column prop="name" label="参数名称" width="200">
                  </el-table-column>
                  <el-table-column prop="isNeed" label="是否必须" width="150">
                  </el-table-column>
                  <el-table-column prop="type" label="参数类型" width="200">
                  </el-table-column>
                  <el-table-column prop="example" label="示例" width="280">
                  </el-table-column>
                  <el-table-column prop="description" label="描述">
                  </el-table-column>
                </el-table>
              </div>

              <h3 class="interface-title">Response</h3>
              <el-tabs type="border-card">
                <el-tab-pane label="响应示例">
                  <json-view :data="resultJson.successJson" icon-style="square" theme="one-dark" :font-size="13" :line-height="22" :deep="2"/>

                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="编辑" name="second">
              <interfaceEdit></interfaceEdit>
            </el-tab-pane>
            <el-tab-pane label="接口调试" name="third">
              <interfaceDebug ref="interfaceDebug"></interfaceDebug>
            </el-tab-pane>
            <el-tab-pane label="接口Mock" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import interfaceGroup from "./interfaceGroup";
import interfaceEdit from "./interfaceEdit";
import vueJsonEditor from 'vue-json-editor';
import jsonView from 'vue-json-views';
import interfaceDebug from "./interfaceDebug";

export default {
  name: "interfaceDetail",
  data() {
    return {
      activeName: 'first',
      interfaceForm: {
        id: 1,
        name: '获取短信验证码',
        method: 'GET',
        status: 1,
        author: '小丽',
        updateTime: '2022-03-05 22:25:32',
        path: '/user/v1/genVerifyCode',
        description: '获取短信验证码'
      },
      resultJson: {
        successJson: {
          "code": 200,
          "message": "success",
          "data": {"id": 1, "name": "用户管理", "description": null, "createTime": "2022-12-26 06:41:01", "updateTime": "2022-12-26 16:15:59", "projectId": 1}
        }
      },
    }
  },
  components: {
    interfaceGroup,
    interfaceEdit,
    vueJsonEditor,
    jsonView,
    interfaceDebug
  },
  methods: {
    copy(data) {
      let oInput = document.createElement('input'); //js创建一个input输入框
      oInput.value = data;   //将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(oInput); // 将输入框暂时创建到实例里面
      oInput.select(); // 选择输入框内容
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      });
      oInput.remove()  // 最后删除实例中临时创建的input输入框，完成复制操作
    }
  }

}
</script>

<style scoped>
.interface {
  background-color: #eff0f4;
  height: 100%;
  padding: 2px 2px 50px;
}

.interface-content {
  margin-left: 3px;
  background-color: #fff;
  height: 100%;
}

.interface-title {
  clear: both;
  font-weight: 600;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  margin: 8px 0 0;
  padding-bottom: 3px;
  width: 100px;
}
</style>
